<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules" >
      <a-form-model-item label="姓名" prop="name">
        <a-input v-model="form.name" placeholder="干部姓名" />
      </a-form-model-item>
      <a-form-model-item label="性别" prop="sex">
        <a-select v-model="form.sex"  placeholder="干部性别" >
          <a-select-option :value="1">
            男
          </a-select-option>
          <a-select-option :value="2">
            女
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="学历" prop="education">
        <a-select v-model="form.education"  placeholder="团员学历" >
          <a-select-option :value="'博士研究生'">博士研究生</a-select-option>
          <a-select-option :value="'硕士研究生'">硕士研究生</a-select-option>
          <a-select-option :value="'大学本科'">大学本科</a-select-option>
          <a-select-option :value="'大学专科'">大学专科</a-select-option>
          <a-select-option :value="'高中'">高中</a-select-option>
          <a-select-option :value="'中职'">中职</a-select-option>
          <a-select-option :value="'初中'">初中</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="电话" prop="phone">
        <a-input v-model="form.phone" placeholder="干部电话" />
      </a-form-model-item>
      <a-form-model-item label="身份证" prop="cardNo">
        <a-input v-model="form.cardNo" placeholder="干部身份证号" />
      </a-form-model-item>
      <a-form-model-item label="生日" prop="birthday">
        <a-date-picker style="width:100%" v-model="form.birthday" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" placeholder="干部生日" />
      </a-form-model-item>
      <a-form-model-item label="组织" prop="orgId">
        <a-input readOnly placeholder="组织" size="large" v-model="form.orgName">
          <div slot="addonAfter" @click="onSearch">
            选择
          </div>
        </a-input>
      </a-form-model-item>
       <a-form-model-item label="团干部" prop="job">
        <a-select v-model="form.job"  placeholder="团干部">
          <a-select-option :value="1">
            书记
          </a-select-option>
          <a-select-option :value="2">
            副书记
          </a-select-option>
          <a-select-option :value="3">
            组织委员
          </a-select-option>
          <a-select-option :value="4">
            宣传委员
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
     <a-modal
      title="组织"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
    <orgTree ref="orgtree"  @reject="rejectTree"></orgTree>
     </a-modal>
  </div>
</template>

<script>
import orgTree from "@/components/orgTree";
export default {
  components: { orgTree },
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    let validateIdCard = (rule, value, callback) => {
      if (!value || value.length !== 18) {
        callback(new Error('请输入正确的身份证号'));
      } else {
        callback();
      }
    };
    let validateTel = (rule, value, callback) => {
      console.log(value);
      if (!value || value.length !== 11) {
        callback(new Error('请输入正确的电话号'));
      } else {
        callback();
      }
    };
    let validateOrg = (rule, value, callback) => {
      if (!this.form.orgId && !this.form.orgName) {
        callback(new Error('请选择组织'));
      } else {
        callback();
      }
    };
    return {
      myList: [],
      roleList: [],
      visible:false,
      confirmLoading:false,
      rules: {
        name: [{required: true, message: '请输入团员名称', trigger: 'blur'}],
        education: [{required: true, message: '请输入学历', trigger: 'blur'}],
        sex: [{required: true, message: '请输入性别', trigger: 'blur'}],
        cardNo: [{required: true, message: '请输入身份证', trigger: 'blur'},{validator: validateIdCard, trigger: 'blur'}],
        phone: [{required: true, message: '请输入电话', trigger: 'blur'},{validator: validateTel, trigger: 'blur'}],
        status: [{required: true, message: '请输入状态', trigger: 'blur'}],
        job: [{required: true, message: '请输入职务', trigger: 'blur'}],
        orgId: [
          {required: true, message: '请选择组织', trigger: 'change'},
          {validator: validateOrg, trigger: 'blur'}
        ],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
    }
  },
  created() {
    if (!this.form.id) {
      this.form.isAdmin = 0
    }
     this.findRoleList();
  },
  methods: {
     reject() {
      this.confirmLoading = false;
    },
    pass() {
      this.visible = false;
      this.confirmLoading = false;
      this.search();
    },
    handleOk(e) {
      this.$refs.orgtree.save();
    },
    handleCancel(e) {
      this.visible = false;
    },
    onSearch(){
      this.visible = true
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.cadre.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit('pass', null);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit('reject', null);
            }
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
    rejectTree(data){
      this.visible = false;
      this.form.orgName = data.name
      this.form.orgId = data.id
      this.$refs.form.clearValidate('orgId');
    },
    cancel() {
      this.$router.push(`/cadre/list`);
    },
    findRoleList() {
      this.$ajax({
        url: this.$api.system.role.findRoleList,
        data: {},
        success: (result) => {
          this.roleList = result;
        },
      });
    },
    //  filteList(){
    //   if (this.myList && this.myList.length) {
    //     let myListArr = '';
    //     this.myList.map(item => {
    //       myListArr += item.role_id + ','
    //     })
    //     return this.roleList.filter(item => !myListArr.includes(item.id + ','));
    //   } else {
    //     return this.roleList;
    //   }
    // },
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
    padding: 8px 108px!important;
  .header{
    height: 56px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    padding-left: 2.4rem;
  }
  .content{
    height: auto;
    padding: 3.2rem 13.2rem;
    border-top: .1rem solid rgba(0, 0, 0, 0.1);;
    border-bottom: .1rem solid rgba(0, 0, 0, 0.1);;
  }
  .footer{
    height: 64px;
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 2.4rem;
    .ant-btn {
      margin-left: 1.6rem;
    }
  }
}
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
